<template>
    <div id="ForeIndex">
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple" style="text-align: center">
                    <el-row class="tac">
                        <el-col :span="12" style="width: 224px">
                            <el-menu
                                    default-active=""
                                    class="el-menu-vertical-demo"
                                    @open="handleOpen"
                                    @close="handleClose"
                            >
                                <!--              内容左侧菜单栏-->
                                <el-menu-item index="1">
                                    <el-icon>
                                        <icon-menu/>
                                    </el-icon>
                                    <span>分类</span>
                                </el-menu-item>
                                <el-menu-item index="2">
                                    <el-icon>
                                        <icon-menu/>
                                    </el-icon>
                                    <span>精华</span>
                                </el-menu-item>
                                <el-menu-item index="3">
                                    <el-icon>
                                        <icon-menu/>
                                    </el-icon>
                                    <span>候选</span>
                                </el-menu-item>
                                <!--              分隔-->
                                <div style="width:100%;height:5px;margin:5px 0;"></div>
                                <!--              分隔-->
                                <el-menu-item index="5">
                                    <el-icon>
                                        <icon-menu/>
                                    </el-icon>
                                    <span>订阅</span>
                                </el-menu-item>
                                <el-menu-item index="6">
                                    <el-icon>
                                        <icon-menu/>
                                    </el-icon>
                                    <span>关注</span>
                                </el-menu-item>
                                <el-menu-item index="7">
                                    <el-icon>
                                        <icon-menu/>
                                    </el-icon>
                                    <span>我评</span>
                                </el-menu-item>
                                <el-menu-item index="8">
                                    <el-icon>
                                        <icon-menu/>
                                    </el-icon>
                                    <span>我赞</span>
                                </el-menu-item>
                                <el-menu-item index="9">
                                    <el-icon>
                                        <icon-menu/>
                                    </el-icon>
                                    <el-dropdown style="color: black">
                      <span class="el-dropdown-link">
                        更多
                      </span>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item>所有随笔</el-dropdown-item>
                                                <el-dropdown-item>最新评论</el-dropdown-item>
                                                <el-dropdown-item>官方博客</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </el-menu-item>

                                <!--              分隔-->
                                <div style="width:100%;height:5px;margin:5px 0;"></div>
                                <!--              分隔-->

                                <el-menu-item index="10">
                                    <el-icon>
                                        <icon-menu/>
                                    </el-icon>
                                    <span>反馈</span>
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <!--      内容中间部分-->
            <el-col :span="14" style="background-color: white">
                <div class="grid-content bg-purple-light">
                    <div class="content-header">
                        <!--            <div v-for="(item) in recommend" :key="item.id">-->
                        <!--              <div v-text="item.title" style="text-decoration: underline;color: blue"-->
                        <!--                   @click="$router.push('/blog/' + item.id)"></div>-->
                        <!--            </div>-->
                        <div class="head-tabs">
                            <el-tabs v-model="activeTabsName" type="card" class="demo-tabs"
                                     @tab-click="handleClick" @tab-change="tabChange">
                                <el-tab-pane label="推荐" name="commend"></el-tab-pane>
                                <el-tab-pane label="最新" name="new"></el-tab-pane>
                                <el-tab-pane label="热榜" name="hot"></el-tab-pane>
                            </el-tabs>
                        </div>

                    </div>

                    <div class="content-main" ref="contentWrap">
                        <div class="content-main1" v-for="(item) in recommend" :key="item.id">
                            <div v-text="item.title" ></div>

                            <div>
                                <img :src="item.firstPicture" alt="" title=""
                                     @click="$router.push('/blog/' + item.id)"
                                />
                                <div class="content-main1-a" v-html="item.summary" @click="$router.push('/blog/' + item.id)"></div>
                            </div>

                            <div class="content-footer">
                <span style="width: 64px" v-text="item.user.username"
                      @click="$router.push('/person/' + item.user.id)"></span>
                                <span style="width: 110px" v-text="item.disTimeSpan + '前'"></span>
                                <span>
                  <el-icon><Pointer/></el-icon>{{ item.likesCount }}
                </span>
                                <span>
                  <el-icon><Star/></el-icon>{{ item.collectionCount }}
                </span>
                                <span>
                  <el-icon><View/></el-icon>{{ item.views }}
                </span>
                            </div>

                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <div class="footer-each">
                        <h4 style="color: darkgray">阅读排行</h4>
                        <ul>
                            <li v-for="(item,index) in blogOrderList" :key="item.id">
                                <span v-text="++index"></span>
                                <span v-text="item.title" @click="$router.push('/blog/' + item.id)"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import request from "../../utils/request";
import {debounce} from "../../utils/index";
import {Pointer, Star, View} from '@element-plus/icons'
import {mapState} from 'vuex'
import {navList} from '@/utils/data'

export default {
    name: "ForeIndex",

    components: {
        // location
        Pointer, Star, View
    },

    data() {
        return {
            recommend: [],
            blogOrderList: [],
            activeTabsName: 'commend',
            queryTag: navList[this.overallNav],
            pageParams: {
                pageNum: 1,
                pageSize: 10
            },
            search:"",
        }
    },
    // beforeRouteEnter(to, from, next) {
    //     console.log("this.$router",this.$router)
    // },
    computed: {
        ...mapState("app", ["overallNav"]),
        getBlogSearch() {
            return this.$store.state.blog.blogSearch;
        },
    },
    watch: {
        overallNav(newVal, oldVal) {
            this.queryTag = navList[newVal]
            this.load();
        },
        // 监视搜索词变化
        "getBlogSearch"(newVal,oldVal) {
            //
            // if(newVal == oldVal)return
            this.search = newVal
            this.load();
            // console.log("this.search", this.search)
        },
    },
    created() {
    },
    mounted() {
        let self = this;
        window.addEventListener("scroll", this.handleScroll.bind(this, self), true);
        this.load();
        this.getBlogOrder()
    },
    beforeDestroy() {
        let self = this
        window.removeEventListener("scroll", this.handleScroll.bind(this, self), true);
    },

    methods: {
        //推荐加载
        load() {
            request.get("/fore/blog", {
                params: {
                    pageNum: this.pageParams.pageNum,
                    pageSize: this.pageParams.pageSize,
                    search: this.search,
                    type: this.activeTabsName,
                    tag: this.queryTag,
                }
            }).then(res => {
                if (res.code != -1) {
                    this.recommend = res.data.records
                } else {
                    this.recommend = []
                }
            })
        },

//阅读排行
        getBlogOrder() {
            request.get("/fore/blog/order", {
                params: {
                    pageNum: 1,
                    pageSize: 6,
                    search: ''
                }
            }).then(res => {
                this.blogOrderList = res.data.records
            })
        },

        handleClose() {
        },
        handleOpen() {
        },
        handleClick() {
            this.load();
        },
        tabChange(name) {
        },
        handleScroll: debounce((self) => {
            //1.获取滚动区域元素
            // let contentWrap = document.getElementById("content-wrap");
            let contentWrap = self.$refs.contentWrap;
            console.log("contentWrap触发滑动");
            if (contentWrap) {
                //2.获取元素高度
                let height = contentWrap.$el.offsetHeight;
                //3.获取滚动区域到头部的距离
                let top = contentWrap.$el.scrollTop || document.documentElement.scrollTop;
                //4.获取滚动条高度
                // let scrollHeight = contentWrap.scrollHeight;
                let scrollHeight = document.body.scrollHeight;
                //5.滚动条到底部的条件 (滚动区域到头部的距离 + 屏幕高度 = 可滚动的总高度)
                if (
                    (top + height + 1 >= scrollHeight) &&
                    (self.pageParams.pageNum * self.pageParams.pageSize <= self.recommend.length)
                ) {
                    self.pageParams.pageSize += 10;
                    self.load();
                }
            }
        }, 200),
    }
}
</script>

<style lang="less" scoped>
@import url('../../style/ForeIndex.less');
</style>
